<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TodoList案例</title>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <style type="text/css">
        #app {
            width: 350px;
            margin: 50px auto;
        }

        li {
            list-style-type: none;
        }

        ul {
            padding-left: 0;
        }

        .add {
            width: 200px;
            height: 20px;
            margin-right: 10px;
        }
        /* 当备忘项勾选完成后，使用该样式描述 */
        .finish {
            color: #ccc;
            text-decoration: line-through;
        }

        .span1 {
            color: skyblue;
        }
    </style>
</head>

<body>
<div id="app">

    <h1>任务列表</h1>
    <p>任务总数：{{ arr.length }}；还有：{{undoneAll}} 未完成；【<span @click="removeArr" class="span1">完成</span>】</p>
    <ul>
        <li v-for="(ar,index) in arr" :key="index" >
            <!--                <input type="checkbox" @click="check(index)" :value="index" v-model="checks">-->
            <input type="checkbox" v-model="ar.bol">
            <span class="span1" v-if="!ar.edit&&!ar.bol" @click="clickLi(index)">{{ar.des}}</span>
            <span class="finish" v-if="ar.bol">{{ar.des}}</span>
            <input class="update" v-if="ar.edit==true" v-model="ar.des" @blur="blurLi(index)" ref="abc"/>
        </li>
    </ul>
    <input type="text" class="add" v-model="msg2" />
    <button @click='add()'>添加</button>
</div>
</body>

</html>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            arr: [
                { des: '设计产品原型', bol: false, edit: false },
                { des: 'UI设计', bol: false, edit: false },
                { des: '编写页面代码', bol: false, edit: false },
                { des: '编写js代码', bol: false, edit: false },
            ],
            msg: '',
            msg2:'',
        },
        computed:{
            undoneAll(){
                let result = this.arr.reduce(function (total,value){
                    if (!value.bol){
                        return total+1;
                    } else {
                        return total;
                    }
                },0);
                return result;
            }
        },
        methods: {
            /* check(i){
               this.arr[i].bol=!this.arr[i].bol;
            },*/
            //鼠标点击span标签的任务，变成input标签，任务可以修改
            clickLi(i){
                this.arr[i].edit = true;
                this.$nextTick((x)=>{   //正确写法
                    this.$refs.abc.focus();
                })
            },
            //表单失去焦点，完成修改，并变成span标签
            blurLi(i){
                this.arr[i].edit=false;
            },
            //添加功能
            add(){
                if (this.msg2!=""){
                    this.arr.push({des:this.msg2,bol:false,edit:false});
                    this.msg2="";
                }
            },
            //点击完成的删除功能
            removeArr(){
                //this.arr.splice(1,1);
                for (let i=0;i<this.arr.length;i++) {
                    //console.log(ar);
                    if (this.arr[i].bol){
                        //console.log(ar.bol+" "+i);
                        this.arr.splice(i,1);
                        i--;
                    }
                }
                //this.checks=[];
            }
        }
    });
</script>